<template>
	<view class="home flex-col">
		<u-swiper :list="swiperList" height="180" radius="0" indicator circular></u-swiper>
		<view class="p-10">
			<uni-notice-bar class="b-r-8" background-color="rgba(255,255,255)" :speed='30' show-icon single scrollable
				:text="text" />

			<template v-for="(item, index) in appCategoryList" :index="index">
				<applicationItem v-bind="item" :appList="item.appList" class="m-b-0" />
			</template>

			<u-collapse :value="showMoreKeys" ref="collapse">
				<!-- v-if='hasPermi(["部长","副部长","主管","主任","主办"])' -->
				<u-collapse-item name="1">
					<template #title>
						<view class="content-item-title"><text class="title-txt">生产情况</text></view>
					</template>
					<my-grid :list="list" :decimals="3" :col="2"></my-grid>
				</u-collapse-item>

				<u-collapse-item name="2">
					<template #title>
						<view class="content-item-title"><text class="title-txt">装车数据统计</text></view>
					</template>
					<my-grid :list="list1" :col="2"></my-grid>
				</u-collapse-item>

				<u-collapse-item name="3">
					<template #title>
						<view class="content-item-title"><text class="title-txt">生产车辆分类统计</text></view>
					</template>
					<u-tabs lineWidth="82" lineColor="#2172FC" :list="[{ name: '无人车辆' }, { name: '有人车辆' }]"
						:activeStyle="{ color: '#2172FC', fontWeight: 'bold' }" @click="opts1Fn" current />
					<view class="charts-box" :key="current">
						<qiun-data-charts type="ring" :opts="opts1" :chartData="chartData1" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="4">
					<template #title>
						<view class="content-item-title"><text class="title-txt">当日值班领导</text></view>
					</template>

					<my-scroll style="height: 540rpx">
						<view v-for="(item,i) in list2" :key="i" :class="{'m-t-10': i > 0}"
							class="flex s-center m-between p-10 b-r-10"
							style="background-color: #F5F7FE;border: 1px solid #DCE3E8;">
							<view style="background-color: #0D79BE;" class="b-r-10 p-t-5 p-x-5">
								<image :src="getImgUrl(`tx.png`)" mode="widthFix" style="width: 100rpx" class="block" />
							</view>
							<view class="f1 w0 m-l-10">
								<view class="m-b-10">
									<text style="color:#0052D9" class="f-s-20 fw">{{item.name}}</text>
								</view>
								<view>
									<text style="color: #555D6F" class="m-r-10">{{item.duty}}</text>
									<text style="color:#555D6F">{{phoneHide(item.phone)}}</text>
								</view>
							</view>
							<image :src="getImgUrl(`phone.png`)" mode="widthFix" style="width: 80rpx"
								@click="makePhone(item)"></image>
						</view>
					</my-scroll>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script setup>
	import applicationItem from '../application/application-item.vue';
	import {
		AndroidCheckUpdate
	} from '@/utils/update.js'
	import {
		Authorized
	} from "@u/msgAuth";
	import {
		getByApiCode,
		appAnnouncement,
		callApiBySuffix
	} from "@/api/customApi";
	import {
		phoneHide
	} from "@u/index";

	/***********************************************app公告*****************************/
	const text = ref('');

	function appAnnouncementFn() {
		appAnnouncement().then(res => {
			text.value = res.data.data[1][0]
		})
	}

	const collapse = ref(null),
		showMoreKeys = ref([1, 2, 3, 4]),
		swiperList = ref(['/static/img/index/banner1.png', '/static/img/index/banner2.png',
			'/static/img/index/banner3.png'
		]),
		appCategoryList = [{
			// title: '快捷入口',
			appList: [{
					name: 'HSE',
					path: '/pages/appPages/appPages',
					icon: 'index/hse.svg',
					address: 'http://117.191.103.69:38087/xjsthhse/web/BCBS04'
				},
				{
					name: '设备生命周期',
					path: '/pages/appPages/appPages',
					icon: 'index/sbsmzq.svg',
					address: 'http://117.191.103.69:39400',
					// 	address: 'http://172.41.100.237:5174/'
				},
				// {
				// 	name: '无人驾驶',
				// 	path: '/pages/appPages/appPages',
				// 	icon: 'index/wrjs.svg',
				// 	address: ''
				// },
				// {
				// 	name: '有人驾驶',
				// 	path: '/pages/appPages/appPages',
				// 	icon: 'index/yrjs.svg',
				// 	address: ''
				// },
				{
					name: '矿山设计',
					path: '/pages/appPages/appPages',
					icon: 'index/kssj.svg',
					address: 'http://218.31.110.43:42099/mes-h5/#/views/home/index'
				},
				// {
				// 	name: '人员定位',
				// 	path: '/pages/appPages/appPages',
				// 	icon: 'index/rydw.svg',
				// 	address: ''
				// },
				{
					name: '产运销',
					path: '/pages/appPages/appPages',
					icon: 'index/cyx.svg',
					address: ''
				}
			]
		}];

	/**********************************************************************生产情况***********************************/
	let list = ref([{
				key: '采煤',
				title: '采煤量',
				value: '0',
				unit: '万吨'
			},
			{
				key: '剥离',
				title: '剥离量',
				value: '0',
				unit: '万m³'
			},
			{
				key: '一车间收矿量',
				title: '一车间产量',
				value: '0',
				unit: '万吨'
			},
			{
				key: '二车间收矿量',
				title: '二车间产量',
				value: '0',
				unit: '万吨'
			}
		]),
		list1 = ref([{
				key: '装车数量',
				title: '装车数量',
				value: '0',
				unit: '万吨',
				decimals: 1
			},
			{
				key: '预约车数',
				title: '预约数量',
				value: '0',
				unit: '辆'
			},
			{
				key: '等待装车数量',
				title: '等待装车数量',
				value: '0',
				unit: '辆'
			},
			{
				key: '已装车数量',
				title: '已装车数量',
				value: '0',
				unit: '辆'
			}
		]),
		list2 = ref([{}, {}, {}])

	let chartData1 = ref({}),
		opts1 = ref({
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
				"#ea7ccc"
			],
			padding: [10, 0, 0, 0],
			legend: {
				show: true,
				position: "top",
				padding: 0,
				margin: 0,
				fontSize: 10,
				itemGap: 0,
			},
			title: {
				name: "0",
				fontSize: 30,
				color: "#000",
				offsetY: -5,
			},
			subtitle: {
				name: "有人驾驶",
				fontSize: 15,
				color: "#000"
			},
			extra: {
				ring: {
					ringWidth: 20,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 10,
					border: true,
					borderWidth: 3,
					borderColor: "#FFFFFF",
				}
			}

		}),
		opts2 = {
			color: ['#0853FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4',
				'#ea7ccc'
			],
			padding: [15, 0, 0, 0],
			dataLabel: false,
			dataPointShape: false,
			legend: {
				show: false
			},
			xAxis: {
				disableGrid: true,
				calibration: true
			},
			yAxis: {
				gridType: 'dash',
				data: [{
					min: 0,
					axisLine: false
				}]
			},
			extra: {
				column: {
					type: 'group',
					width: 20,
					activeBgColor: '#000000',
					activeBgOpacity: 0.08,
					linearType: 'opacity',
					linearOpacity: 0.1
				}
			}
		},
		opts3 = {
			color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4',
				'#ea7ccc'
			],
			padding: [5, 5, 5, 5],
			legend: {
				show: false
			},
			title: {
				name: '360',
				fontSize: 30,
				color: '#000',
				offsetY: -10
			},
			subtitle: {
				name: '总数',
				fontSize: 15,
				color: '#000'
			},
			extra: {
				ring: {
					ringWidth: 30,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 20,
					border: true,
					borderWidth: 3,
					borderColor: '#FFFFFF'
				}
			}
		}

	/********************************************************生产车辆分类统计*********************************************/
	const current = ref(0);

	function opts1Fn({
		index
	} = {}) {
		current.value = index ?? current.value;
		let data = {};
		chartData1.value = {};
		if (current.value === 0) {
			data = {
				suffix: 'getNOBodyDriverCarType'
			}
			opts1.value.subtitle.name = '无人车辆';
			callApiBySuffix(data).then((res) => {
				opts1.value.title.name = res.data.reduce((prev, cur) => {
					cur.value = Number(cur.val);
					cur.labelText = `${cur.name}: ${cur.val}`;
					return prev + cur.val;
				}, 0);
				chartData1.value = JSON.parse(
					JSON.stringify({
						series: [{
							data: res.data
						}]
					})
				);
			});
		} else {
			data = {
				apiCode: "cljkclxxtj",
				propertyMapping: {
					name: "name",
					value: "val"
				},
			}
			opts1.value.subtitle.name = '有人车辆'
			getByApiCode(data).then((res) => {
				opts1.value.title.name = res.data.reduce((prev, cur) => {
					cur.value = Number(cur.value);
					cur.labelText = `${cur.name}: ${cur.value}`;
					return prev + cur.value;
				}, 0);
				chartData1.value = JSON.parse(
					JSON.stringify({
						series: [{
							data: res.data
						}]
					})
				);
			});
		}
	};

	function makePhone(item) {
		uni.makePhoneCall({
			phoneNumber: item.phone.replace(/^0(\d{11})/, '$1')
		})
	}
	// 生产情况
	function fn1() {
		getByApiCode({
			apiCode: "zhuyemianshengchanqingkunag",
			propertyMapping: {
				key: 's',
				val: 'y'
			}
		}).then(res => {
			const data = ArrayToObj(res.data)
			list.value.forEach(item => {
				item.value = data[item.key]
			})
		})
	}
	// 生产情况
	function fn2() {
		getByApiCode({
			apiCode: "ZHUYEMIANZHUANGCHE",
			propertyMapping: {
				key: 's',
				val: 'y'
			}
		}).then(res => {
			const data = ArrayToObj(res.data)
			list1.value.forEach(item => {
				item.value = data[item.key]
			})
		})
	}

	function fn3() {
		getByApiCode({
			apiCode: "dangrizhibanxinxi",
			propertyMapping: {
				duty: "typename",
				name: "name",
				phone: "phone"
			}
		}).then(res => {
			list2.value = res.data;
		})
	}

	function getServerData(refresh) {
		Promise.all([
			appAnnouncementFn(),
			// 生产情况
			fn1(),
			// 装车数据统计
			fn2(),
			// 生产车辆分类统计
			opts1Fn({}),
			// 值班领导
			fn3(),
		]).then(() => {
			if (refresh) {
				nextTick(() => {
					uni.stopPullDownRefresh()
				})
			}
		});
	}

	function pushMsg() {
		uni.navigateTo({
			url: '/pages/index/msg'
		});
	}

	onShow(() => {
		getServerData();
		// #ifdef APP
		AndroidCheckUpdate()
		// #endif
	});

	onLoad(() => {
		// #ifdef APP
		// Authorized();
		// #endif
	});

	onPullDownRefresh(() => {
		getServerData(true)
	});
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.leader-list {
		margin-top: -20rpx;

		.leader-list-item {
			background: #f5f7fe;
			margin-top: 12rpx;
			height: 125rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
				flex: 1;

				.post {
					color: #555d6f;
				}

				.name {
					color: #0052d9;
					font-size: 36rpx;
					font-weight: bold;
				}
			}

			.right {
				margin-right: 20rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.line-progress {
		text-align: left;
		line-height: 60rpx;
		font-size: 15px;
		padding: 5rpx;
	}

	.list_left {
		text-align: left;
		margin: 5rpx;
		font-size: 14px;
	}

	.list_conten {
		color: #2472f1;
		margin: 0rpx 5rpx;
	}

	.list_right {
		float: right;
	}

	.grid {
		.unit {
			font-size: 24rpx;
			color: #828893;
			margin-left: 8rpx;
			float: right;
		}
	}

	.u-border-bottom {
		border-bottom-width: 10rpx !important;
		border-color: #fff !important;
		border-bottom-style: solid;
	}

	.u-border-right {
		border-right-width: 10rpx !important;
		border-color: #fff !important;
		border-right-style: solid;
	}

	.grid_box {
		height: 100rpx;
		line-height: 100rpx;
	}

	.grid_left {
		float: left;
		margin-right: 50rpx;
		display: flex;
	}

	.grid_conten {
		color: #2472f1;
		float: right;
	}

	.charts_box {
		height: 500rpx;
	}
</style>